import React from 'react'
import ROUTES from '@utils/routes'
import './index.less'
import { withRouter } from 'react-router-dom'
import { Pagination } from 'antd'

class List extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            current: 1,
            total: props.data.length,
            pageSize: 6,
        }
    }

    render() {
        let { data } = this.props
        let { total, current, pageSize } = this.state
        let start = (current -1) * pageSize
        let end = (current -1) * pageSize + pageSize
        let filterData = data.slice(start, end)
        
        return (
            <div className="com-news">
                <ul className="main">
                {
                    !!filterData && filterData.map((item, index) => (
                        <li key={index}>
                            <p className='time'>{item.time}</p>
                            <div className="title"
                                onClick={
                                    ()=>{
                                        this.props.history.push({
                                            pathname: ROUTES.NEWS.DETAIL.URL,
                                            search: `id=${item.id}`
                                        })
                                    }
                                }
                            >
                                <h1 className='ell-one'>{item.title}</h1>
                                <p className='ell-two'>{item.desc}</p>
                            </div>
                        </li>
                    ))
                }
                    <li style={{paddingRight: '24px', display: 'flex', justifyContent: 'flex-end'}}>
                        <Pagination
                            className="cus-pagination"
                            onChange={(currentPage, pageSize) => {
                                this.setState({ current: currentPage})
                            }}
                            current={current}
                            pageSize={pageSize}
                            total={total}
                            showTotal={(total) => `共${total}条`}
                            hideOnSinglePage
                        />
                    </li>
                </ul>
                
            </div>
        )
    }
}
export default withRouter(List)